<template>
    <div class="cmt-container">
        <h3>发表评论</h3>     
        <hr>  
        <textarea placeholder="请输入要BB的内容（做多吐槽120字）" v-model="msg" maxlength="120"></textarea>
        <mt-button type="primary" @click="postComment" size="large">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(comment, i) in comments" :key="i">
                <div class="cmt-title">
                   <span> {{ i + 1 }}楼&nbsp;&nbsp;用户：{{ comment.user_name }}</span>
                   <span>发表时间：{{ comment.add_time | dateFormat}}</span>
                </div>
                <div class="cmt-body">{{ comment.content }}</div>
            </div>
            
        </div>
        <mt-button v-show="isShowMoreBtn" type="danger" @click="getMore" plain size="large">加载更多。。。</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
import axios from 'axios'

export default {
    data () {
        return {
            pageIndex : 1,
            comments : [],
            msg:'',
            isShowMoreBtn : true
        }
    },
    created () {
        this.getComments()
    },
    methods : {
        async postComment () {
            if (this.msg == '') {
                return Toast('请输入评论内容')
            }
            try {
                const { data } = await axios.post('/api/news-comments', {
                    news_id : this.id,
                    content : this.msg
                })
                this.comments.unshift(data)
            } catch (err) {
                const { status, statusText } = err.response
                Toast(status + statusText)
            }
        },
        async getComments () {
            try {
                const { data : comments } = await axios.get(`/api/news-comments/${this.id}?_page=${this.pageIndex}`)
                if (comments.length <= 0) {
                    this.isShowMoreBtn = false
                    return
                }
                this.comments = this.comments.concat(comments)
            } catch (err) {
                const {status, statusText} = err.response
                Toast(status + statusText)
            }
        },
        async getMore () {
            this.pageIndex++
            this.getComments()
        }
    },
    props : {
        id : [String, Number]
    }
    // props : ["id"]
}
</script>

<style lang="scss" scoped>
.cmt-container {
    h3 {font-size: 18px;}
    textarea {
        font-size: 14px;
        height: 85px;
        margin: 0;
    }
    .cmt-list {
        margin: 5px 0;
        .cmt-item {
            font-size: 13px;
            .cmt-title {
                padding: 0 3px;
                line-height: 30px;
                background-color: #ccc;
                display: flex;
                justify-content: space-between;
            }
            .cmt-body {
                line-height: 35px;
                text-indent: 2em;
                padding: 0 3px;
            }
        }
    }
}
</style>

